$(document).ready(function () {

	$('body').on('click', '.popover-content button[name=cancel]', function(e) {
		e.preventDefault();

		closePopover();

//		$(this).parents('[data-popover-id]:last').remove();
	});

	window.initTagsInputWithParams = function () {
		$('input.tagsinput-many-with-params').each(
			function () {
				var $this = $(this);
				var maxTagsCount = parseInt($this.attr('max-tag'));
				if (0 === maxTagsCount) {
					maxTagsCount = 1;
				}

				var showField = $this.attr('show-field');
				if (!showField) {
					showField = 'title';
				}
				// для каждого поля получаем его значение
				var dataVal = JSON.parse($this.attr('data-value'));
				// прикручиваем плагин
				if ($this.attr('data-tagsinputed')) {
					return;
				}
				$this.attr('data-tagsinputed', true);
				$this.tagsinput({
					tagClass: function (item) {
						return 'label label-info clickable';
					},
					itemValue: '_id',
					itemText: showField,
					maxTags: maxTagsCount,
					minLength: 2,
					typeahead: {
						delay: 50,
						source: function (query) {
							return $.getJSON($this.attr('query-url') + '?query='
							+ escape(query));
						}
					}
				});

				$('.tagsinput-bootafor').hide();

				// добавляем значения
				if (dataVal.length) {
					var ids = [];
					$.each(dataVal, function(index, value) {
						ids.push(value._ref);
					});

					$.getJSON($this.attr('query-url'),
						{
							values: ids.join(',')
						},
						function (data) {
							if (!data || data.length == 0) {
								return;
							}

							$this.attr('data-disable-change', true);
							$this.addClass('data-disableСhange');
							$.each(data, function (key, val) {
								$.each(dataVal, function(index, value) {
									if (value._ref == val._id) {
										value.title = val.title;
										value._id = value._ref;
										$this.tagsinput('add', value);
									}
								});
							});
							$this.removeClass('data-disableСhange');
							$this.attr('data-disable-change', false);
						});
				}

				$this.on('beforeItemAdd', function(event) {
					event.cancel = (event.item.createNewItem != undefined) && (!!event.item.createNewItem);

					if (!event.cancel) {
						return;
					}

					var block = $this.parents('.element-block');
					var container = block.find('.bootstrap-tagsinput');

					$.get($this.attr('query-new-form-url'), {id : event.item._id}, function (data) {
						var popoverId = showPopover(container, data, 'tagsinput-many-with-params-create-form');
						window.init();

						//$('body').one('tagsinpit.withParams.newElement', '[data-popover-id=' + popoverId + ']',
						$('body').one('tagsinpit.withParams.newElement',
							function(e, newItem) {
								$('[data-popover-id=' + popoverId + ']').remove();

								var url = $this.attr('query-url');
								$.get(url, {values:newItem}, function(data) {
									var items = JSON.parse(data);

									if (items.length) {
										$this.tagsinput('add', items[0]);
									}
								});
							}
						);
					});
				});

				$this.on('itemAdded', function (event) {
					referenceManyWithParams.recalculateValue($this);
				});

				$this.on('itemRemoved', function (event) {
					referenceManyWithParams.recalculateValue($this);
				});
			});

		// убиваем текст если ушли из поля
		$('input.tagsinput-many-with-params').each(function () {
			var $this = $(this);
			$this.parent().find('div.bootstrap-tagsinput input').focusout(function () {
				$(this).val('');
			});
		});
	};

	$('body').on('click', '.bootstrap-tagsinput .clickable', function () {
		var $clickedTag = $(this);

		// если кликнули на выделенный элемент - снимаем выделение, скрываем форму
		if ($(this).hasClass('active-tag')) {
			deactivateTag($clickedTag);
			closePopover();
			return;
		}
		activateTag($clickedTag);

		// подготавливаем элемент для инициализации формы
		var currentItem = $clickedTag.data('item');
		var currentItemCopy = $.extend(true, {}, currentItem);
		currentItemCopy._ref = currentItemCopy._id;
		delete currentItemCopy._id;
		delete currentItemCopy.title;

		var $tagsInput = $clickedTag.parents('.element-block').find('input.tagsinput-many-with-params');

		// запрашиваем и отображаем форму
		var paramsFormUrl = $tagsInput.attr('query-params-url');
		$.get(paramsFormUrl, currentItemCopy, function(data) {
			showPopover($clickedTag, data, 'tagsinput-many-with-params-edit-form', $clickedTag.parents('.bootstrap-tagsinput'));
		});

		$clickedTag.siblings('span').removeAttr('tabindex');
		$clickedTag.attr('tabindex', '1').focus();
	});

	$('body').on('click', '.tagsinput-many-with-params-edit-form [type="submit"]', function (event) {
		event.preventDefault();

		// получаем данные с формы
		var formData = {};
		var $editForm = $(this).parents('.popup-box');
		$editForm.find('input,select,textarea').each(function (index, item) {
			var name = $(this).attr('name');
			if (['___'].indexOf(name) > -1) {
				return;
			}

			var val = $(this).val();
			formData[name] = val;
		});

		// получаем id элемента, на который кликнули
		var block = $(this).parents('.modal-content');
		var selectedTag = block.find('.bootstrap-tagsinput .clickable.active-tag');
		var elementData = selectedTag.data('item');
		var clickedId = elementData._id;

		var $tagsInput = block.find("input.tagsinput-many-with-params");
		// получам все объекты тэгсинпута и находим индекс нужного
		var itemsPool = $.extend(true, {}, $tagsInput.tagsinput('items'));
		var poolIndex = -1;
		$.each(itemsPool, function(index, value) {
			if (value._id == clickedId) {
				poolIndex = index;
			}
		});

		// наполняем нужный объект данными из формы
		$.each(formData, function(key, value) {
			key = key.replace('\[\]', '');
			itemsPool[poolIndex][key] = value;
		});

		// скрываем форму, снимаем выделение с элемента
		deactivateTag(selectedTag);

		// перестраиваем тэгсинпут с новыми данными
		$tagsInput.tagsinput('removeAll');
		$tagsInput.addClass('data-disableСhange');
		$.each(itemsPool, function(key, value) {
			$tagsInput.tagsinput('add', value);
		});
		$tagsInput.removeClass('data-disableСhange')
		$tagsInput.tagsinput('refresh');

		closePopover();
	});

	$('body').on('click', '.tagsinput-many-with-params-create-form [type="submit"]', function (event) {
		event.preventDefault();

		var that = $(this);
		var form = $(this).parents('form:last');

		if (form.length == 0) {
			return;
		}

		var url = form.attr('action');

		$.post(url, form.serialize(), function(data) {

			if ($(data).length > 0) {
				form.find('input').each(function(index, value) {
					$(this).change();
				});
				return;
			}

			var popover = that.parents('[data-popover-id]:last');
			//popover.trigger('tagsinpit.withParams.newElement', data);
			$('body').trigger('tagsinpit.withParams.newElement', data);
		});

		closePopover();
	});



	function showPopover($el, data, subClass, tagsInputContainer)
	{
		if (subClass == undefined) {
			subClass = '';
		}

		if (tagsInputContainer == undefined) {
			tagsInputContainer = $el;
		}

		var min = 1, max = 9999;
		var popoverId = Math.floor(Math.random() * (max - min + 1)) + min;

		// Выясняем координаты элементов для вычисления местоположения tags-input'a
		// относительно главного контейнера в форме
		// для задания правильного верхнего отступа поп-апу (поп-оверу) или поп-чему-нибудь-еще
		var modalBodyTop = $('.modal-body-form').offset().top;
		var tagsInputContainerTop = tagsInputContainer.offset().top;

		var popupContainerTop = tagsInputContainerTop - modalBodyTop;

		if(subClass == 'tagsinput-many-with-params-create-form') {
			tagsInputContainer
				.find('.active-tag')
				.removeClass('active-tag')
				.siblings('.disabled-tag')
				.removeClass('disabled-tag');
		}

		if($('.main-popup-container').attr('data-open-flag') == 'opened') {
			$('.main-popup-container')
				.css('margin-top', popupContainerTop)
				.empty()
				.append('<div class="arrow" style="top: 15px;"> </div><div data-popover-id="' + popoverId + '" class="popup-box ' + subClass + '" role="tooltip"><div class="arrow"></div><div class="popover-content">'+ data +'</div></div>');
		} else if ($('.main-popup-container').attr('data-open-flag') == 'closed') {
			$('.main-popup-container')
				.css('margin-top', popupContainerTop)
				.empty()
				.append('<div class="arrow" style="top: 15px;"> </div><div data-popover-id="' + popoverId + '" class="popup-box ' + subClass + '" role="tooltip"><div class="arrow"></div><div class="popover-content">'+ data +'</div></div>')
				.parent()
				.find('form.crud-ajax-form')
				.animate({width: '56%'}, 400, function() {
					$('.main-popup-container').fadeIn(400, function() {
						$(this).attr('data-open-flag', 'opened');
					});
				});

		}

		return popoverId;
	}

	function closePopover() {
		$('.main-popup-container').fadeOut(400, function() {
			$(this)
				.attr('data-open-flag', 'closed')
				.empty()
				.parent()
				.find('form')
				.animate({'width': '90%'}, 400);
		});
	}

	function activateTag($el)
	{
		$el = $($el);
		// снимаем выделение со всех тэгов и выделяем тот, по которому кликнули
		$el.removeClass('disabled-tag').addClass('active-tag')
			.siblings('.clickable')
			.addClass('disabled-tag')
			.removeClass('active-tag')
			.popover('destroy');
	}

	function deactivateTag($el)
	{
		$el = $($el);
		$el.popover('hide');
		$el.removeClass('active-tag')
			.siblings('.disabled-tag')
			.removeClass('disabled-tag');
	}

});

var referenceManyWithParams = {
	recalculateValue: function (tagsinputContext) {
		var tagElements = tagsinputContext.tagsinput('items');
		var result = [];

		if (tagElements.length == 0) {
			return;
		}

		$.each(tagElements, function(index, value){
			var clone = $.extend(true, {}, value);
			clone._ref = clone._id;
			delete clone._id;
			delete clone.title;

			result.push(clone);
		});

		tagsinputContext.val(JSON.stringify(result));
	}
};